<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="false">
			<view slot="backText">返回</view>
			<view slot="content">校园易活动</view>
		</cu-custom>
		<view class="header bg-gradual-green justify-center flex">
			<image class="bg_ware" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/bg_wave.gif"></image>
			<view v-if="login" class="cu-avatar xl round margin-top-lg" @click="previewAvatar"
				:style="'background-image: url(' + url + '/image/' + userInfo.avatar + ');'"></view>
			<view v-else @click="toLogin">
				<text class="cu-avatar xl round margin-top-lg bg-gradual-green">登录</text>
			</view>
		</view>
		<view class="cu-list grid col-3">
			<view class="cu-item" @click="toMyPublish">
				<view class="cuIcon-activity lg text-green">
					<!-- <view class="cu-tag badge"></view> -->
				</view>
				<text>我的发布</text>
			</view>
			<view class="cu-item" @click="toMyActivity">
				<view class="cuIcon-remind lg text-green">
					<view v-if="recent" class="cu-tag badge">{{num}}</view>
				</view>
				<text>我的参与</text>
			</view>
			<view class="cu-item" @click="toMyStar">
				<view class="cuIcon-favor lg text-green"></view>
				<text>我的收藏</text>
			</view>

			<view v-if="userInfo.author == 'admin'" class="cu-item" @click="toAudit">
				<view class="cuIcon-list lg text-green"></view>
				<text>活动审核</text>
			</view>
		</view>
		<view class="cu-list menu card-menu margin-top margin-bottom-xl shadow-lg radius">
			<view class="cu-item arrow">
				<button class="cu-btn content" open-type="contact">
					<text class="cuIcon-question text-cyan"></text>
					<text class="text-grey">在线咨询</text>
				</button>
			</view>
			<view class="cu-item arrow">
				<navigator class="content" url="../about/about">
					<text class="cuIcon-friend text-red"></text>
					<text class="text-grey">关于我们</text>
				</navigator>
			</view>
			<view class="cu-item arrow">
				<button class="cu-btn content" open-type="feedback">
					<text class="cuIcon-writefill text-cyan"></text>
					<text class="text-grey">意见反馈</text>
				</button>
			</view>
			<view class="cu-item arrow">
				<navigator class="content" url="../tips/tips">
					<text class="cuIcon-creative text-orange"></text>
					<text class="text-grey">使用tips</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'mine',
		data() {
			return {
				url: this.url,
				num: 0,
			}
		},
		computed: {
			...mapState(['userInfo']),
			login() {
				return this.userInfo.userName != ''
			},
			recent() {
				return this.num > 0
			}
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			toMyActivity() {
				if (this.login) {
					uni.navigateTo({
						url: '/pages/myActivity/myActivity'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			},
			toMyPublish() {
				if (this.login) {
					uni.navigateTo({
						url: '/pages/myPublish/myPublish'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toMyStar(){
				uni.navigateTo({
					url: '/pages/myStar/myStar'
				})
			},
			toAudit(){
				uni.navigateTo({
					url: '/pages/activityAudit/activityAudit'
				})
			},
			toChat(){
				uni.navigateTo({
					url: '/pages/activityChat/activityChat'
				})
			}
		},
		mounted() {
			if (this.login) {
				uni.request({
					method: 'GET',
					header: {
						Authorization: 'Bearer ' + this.userInfo.token
					},
					url: this.url + '/tip/' + this.userInfo.userId,
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {
							this.num = res.data
						}
					}
				})
			}

		}
	}
</script>

<style>
	.cu-avatar.xl {
		width: 196rpx;
		height: 196rpx;
		font-size: 2.5em;
	}

	.header {
		position: relative;
		height: 300rpx;
		/* background: linear-gradient(to bottom, #56ccf2, #2f80ed); */
	}

	.bg_ware {
		position: absolute;
		left: 0;
		bottom: -2rpx;
		width: 100%;
		mix-blend-mode: screen;
		height: 120rpx;
	}
</style>
